<%@ page pageEncoding="UTF-8"%>
<%@ include file="../commons/head.jsp"%>
<title>jQueryDOM</title>
<style type="text/css">
</style>
<script type="text/javascript">
$(function(){
	//子节点
	$("#b1").click(function(){
		$("a").css("background-color","#FFFFFF");
		$("p").css("background-color","#FFFFFF");
		$("span").css("background-color","#FFFFFF");
		$("div").css("background-color","#FFFFFF");
		$("#divc").toggle();
		$("#divp").hide();
		$("#divs").hide();
	});
	//父节点
	$("#b2").click(function(){
		$("a").css("background-color","#FFFFFF");
		$("p").css("background-color","#FFFFFF");
		$("span").css("background-color","#FFFFFF");
		$("div").css("background-color","#FFFFFF");
		$("#divp").toggle();
		$("#divc").hide();
		$("#divs").hide();
	});
	//兄弟节点
	$("#b3").click(function(){
		$("a").css("background-color","#FFFFFF");
		$("p").css("background-color","#FFFFFF");
		$("span").css("background-color","#FFFFFF");
		$("div").css("background-color","#FFFFFF");
		$("#divs").toggle();
		$("#divp").hide();
		$("#divc").hide();
	});
	
	/* --子孙节点------------------------- */
	$("#ac1").click(function(){
		//先把所有节点背景色去掉
		$("a").css("background-color","#FFFFFF");
		$("p").css("background-color","#FFFFFF");
		$("span").css("background-color","#FFFFFF");
		$("div").css("background-color","#FFFFFF");
		//所有子节点背景色换成黄色
		$("#div1").children().css("background-color","yellow");
	});
	$("#ac2").click(function(){
		//先把所有节点背景色去掉
		$("a").css("background-color","#FFFFFF");
		$("p").css("background-color","#FFFFFF");
		$("span").css("background-color","#FFFFFF");
		$("div").css("background-color","#FFFFFF");
		//p子节点背景色换成黄色
		$("#div1").children("p").css("background-color","yellow");
	});
	$("#ac3").click(function(){
		//先把所有节点背景色去掉
		$("a").css("background-color","#FFFFFF");
		$("p").css("background-color","#FFFFFF");
		$("span").css("background-color","#FFFFFF");
		$("div").css("background-color","#FFFFFF");
		//span子/孙节点背景色换成黄色
		$("#div1").find("span").css("background-color","red");
	});
	$("#ac4").click(function(){
		//先把所有节点背景色去掉
		$("a").css("background-color","#FFFFFF");
		$("p").css("background-color","#FFFFFF");
		$("span").css("background-color","#FFFFFF");
		$("div").css("background-color","#FFFFFF");
		//id="div1"中id="p1"的子/孙节点背景色换成黄色
		$("#div1").find("#p1").css("background-color","yellow");
	});
	
	/* --父节点------------------------- */
	$("#ap1").click(function(){
		//先把所有节点背景色去掉
		$("a").css("background-color","#FFFFFF");
		$("p").css("background-color","#FFFFFF");
		$("span").css("background-color","#FFFFFF");
		$("div").css("background-color","#FFFFFF");
		//id="p1"的父节点背景色换成黄色
		$("#p1").parent().css("background-color","yellow");
	});
	$("#ap2").click(function(){
		//先把所有节点背景色去掉
		$("a").css("background-color","#FFFFFF");
		$("p").css("background-color","#FFFFFF");
		$("span").css("background-color","#FFFFFF");
		$("div").css("background-color","#FFFFFF");
		//所有span标签的父节点中为p的节点的节点背景色换成黄色
		$("span").parents("p").css("background-color","green");
	});
	
	/* --兄弟节点------------------------- */
	$("#as1").click(function(){
		//先把所有节点背景色去掉
		$("a").css("background-color","#FFFFFF");
		$("p").css("background-color","#FFFFFF");
		$("span").css("background-color","#FFFFFF");
		$("div").css("background-color","#FFFFFF");
		//id="p1"的父节点背景色换成黄色
		$("#aa1").siblings().css("background-color","red");
	});
	$("#as2").click(function(){
		//先把所有节点背景色去掉
		$("a").css("background-color","#FFFFFF");
		$("p").css("background-color","#FFFFFF");
		$("span").css("background-color","#FFFFFF");
		$("div").css("background-color","#FFFFFF");
		//p子节点背景色换成黄色
		$("a").siblings("p").css("background-color","yellow");
	});
	$("#as3").click(function(){
		//先把所有节点背景色去掉
		$("a").css("background-color","#FFFFFF");
		$("p").css("background-color","#FFFFFF");
		$("span").css("background-color","#FFFFFF");
		$("div").css("background-color","#FFFFFF");
		//id="p1"紧邻的前一个同辈元素
		$("#p1").prev().css("background-color","yellow");
		//id="p1"紧邻的后一个同辈元素
		$("#p1").next().css("background-color","red");
	});
	$("#as4").click(function(){
		//先把所有节点背景色去掉
		$("a").css("background-color","#FFFFFF");
		$("p").css("background-color","#FFFFFF");
		$("span").css("background-color","#FFFFFF");
		$("div").css("background-color","#FFFFFF");
		//
		$("#aa2").prevAll().css("background-color","yellow");
		$("#aa2").nextAll().css("background-color","red");
	});
});
</script>
</head>
<body>
	<div class="jQueryDOM">
	<h3>jQuery DOM节点操作 - 父节点、子节点、兄弟节点</h3>
		<div id="div1" style="height: 150px;width:900px;margin-left: 30px;">
			<a href="#" id="aa1">[我是a标签<span id="sp1">我是span标签,我的id是"sp1"</span>我是a标签]</a>
			<p id="p1">我是p标签,我的id是"p1"<span id="sp2">我是span标签,我的id是"sp2"</span></p>
			<a id="aa2" href="#">[我是a标签<span>我是span标签</span>我是a标签]</a>
			<p id="p2">我是p标签,我的id是"p2"</p>
			<p id="p3">我是p标签,我的id是"p2"</p>
		</div>
		<div id="div2">
			<button  id="b1" style="margin-left:15px;" class="easyui-linkbutton" iconCls="icon-reload">子/孙节点获取</button>
			<button  id="b2" style="margin-left:15px;" class="easyui-linkbutton" iconCls="icon-reload">父/祖先点获取</button>
			<button  id="b3" style="margin-left:15px;" class="easyui-linkbutton" iconCls="icon-reload">兄弟节点获取</button>
		</div>
		<!-- 子/孙节点---------------------------------------------------- -->
		<div id="divc" style="display: none;margin-top: 10px;">
			<div style="height: 30px;">
				<label style="margin-left:15px;">点击id="div1"的所有的<b style="color:red;">子节点</b>,并把背景色换成黄色</label>
				<button  id="ac1" class="easyui-linkbutton" iconCls="icon-reload">点击获取</button>
			</div>
			<div style="height: 30px;">
				<label style="margin-left:15px;">点击id="div1"的<b style="color:red;">p子节点</b>,并把背景色换成黄色</label>
				<button  id="ac2" class="easyui-linkbutton" iconCls="icon-reload">点击获取</button>
			</div>
			<div style="height: 30px;">
				<label style="margin-left:15px;">点击id="div1"的<b style="color:red;">span子/孙节点</b>,并把背景色换成黄色</label>
				<button  id="ac3" class="easyui-linkbutton" iconCls="icon-reload">点击获取</button>
			</div>
			<div style="height: 30px;">
				<label style="margin-left:15px;">点击id="div1"中id="p1"的<b style="color:red;">子/孙节点</b>,并把背景色换成黄色</label>
				<button  id="ac4" class="easyui-linkbutton" iconCls="icon-reload">点击获取</button>
			</div>
		</div>
		<!-- 父节点---------------------------------------------------- -->
		<div id="divp" style="display: none;margin-top: 10px;">
			<div style="height: 30px;">
				<label style="margin-left:15px;">点击id="p1"节点的<b style="color:red;">父节点</b>,并把背景色换成黄色</label>
				<button  id="ap1" class="easyui-linkbutton" iconCls="icon-reload">点击获取</button>
			</div>
			<div style="height: 30px;">
				<label style="margin-left:15px;">获取所有span标签的<b style="color:red;">父节点中为p的节点</b>,并把背景色换成绿色</label>
				<button  id="ap2" class="easyui-linkbutton" iconCls="icon-reload">点击获取</button>
			</div>
		</div>
		<!-- 兄弟节点---------------------------------------------------- -->
		<div id="divs" style="display: none;margin-top: 10px;">
			<div style="height: 30px;">
				<label style="margin-left:15px;">获取id="aa1"标签的所有<b style="color:red;">兄弟节点</b>,并把背景色换成红色</label>
				<button  id="as1" class="easyui-linkbutton" iconCls="icon-reload">点击获取</button>
			</div>
			<div style="height: 30px;">
				<label style="margin-left:15px;">获取a标签的p<b style="color:red;">兄弟节点</b>,并把背景色换成黄色</label>
				<button  id="as2" class="easyui-linkbutton" iconCls="icon-reload">点击获取</button>
			</div>
			<div style="height: 30px;">
				<label style="margin-left:15px;">获取id="p1"元素紧邻的<b style="color:red;">前一个同辈元素</b>,并把背景色换成黄色,
											<b style="color:red;">后一个同辈元素</b>,并把背景色换成红色</label>
				<button  id="as3" class="easyui-linkbutton" iconCls="icon-reload">点击获取</button>
			</div>
			<div style="height: 30px;">
				<label style="margin-left:15px;">获取id="aa2"元素<b style="color:red;">之前所有的同辈元素</b>,并把背景色换成黄色,
											<b style="color:red;">之后所有的同辈元素</b>,并把背景色换成红色</label>
				<button  id="as4" class="easyui-linkbutton" iconCls="icon-reload">点击获取</button>
			</div>
		</div>
	</div>
</body>
</html>